<!-- 库存总账（查看全部） -->
<template>
    <view class="generaLedgerDetail">
        <view class="top">
            <view class="title center"> 库存总账 - 初期余额 </view>
            <view class="time center"> 2023-07(未结账) </view>
        </view>
        <view class="content">
            <view class="title">
                <view> 初期余额 </view>
                <view>
                    合计 ：￥{{
                        general_ledgerList.reduce((prev, item) => prev + item.total, 0)| number_format(2)
                    }}
                </view>
            </view>
            <view class="content">
                <view class="row-style">
                    <view class="category"> 品类 </view>
                    <view class="name"> 品名 </view>
                    <view class="quantity"> 数量 </view>
                    <view class="amount"> 金额（元） </view>
                </view>
                <view class="row-style" v-for="(item, index) in general_ledgerList" :key="index">
                    <view class="category">
                        {{ item.category }}
                    </view>
                    <view class="name">
                        {{ item.name }}
                    </view>
                    <view class="quantity">
                        {{ item.quantity }}
                    </view>
                    <view class="amount">
                        {{ item.amount }}
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {},
            general_ledgerList: [
                {
                    category: "粮油", //品类
                    name: "玉米胚芽油-1*4*5L",
                    quantity: 12,
                    amount: 55.6,
                    total: 800.0, //合计
                },
                {
                    category: "粮油", //品类
                    name: "玉米胚芽油-1*4*5L",
                    quantity: 12,
                    amount: 55.6,
                    total: 800.0, //合计
                },
                {
                    category: "粮油", //品类
                    name: "玉米胚芽油-1*4*5L",
                    quantity: 12,
                    amount: 55.6,
                    total: 800.0, //合计
                },
                {
                    category: "粮油", //品类
                    name: "玉米胚芽油-1*4*5L",
                    quantity: 12,
                    amount: 55.6,
                    total: 800.0, //合计
                },
            ],
        };
    },

    // 监听页面加载，该钩子被调用时
    onLoad() { },
    methods: {
        // 查看全部
        goAll() { },
    },

    mounted() { },

    // 监听页面显示，页面每次出现在屏幕上都触发
    onShow() {
        uni.setNavigationBarTitle({
            title: "库存总账",
        });
    },

    // 监听用户下拉动作，一般用于下拉刷新
    onPullDownRefresh() { },

    // 监听页面初次渲染完成，此时组件已挂载完成
    onReady() { },
};
</script>

<style lang="scss">
.generaLedgerDetail {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background: rgba(244, 244, 244, 1);
    padding: 20rpx;
    padding-bottom: 50rpx;

    .top {

        // 居中
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .title {
            font-weight: bold;
            font-size: 30rpx;
            margin: 0 auto;
            color: black;
            margin-top: 20rpx;
        }

        .time {
            margin-top: 20rpx;
        }
    }

    .content {
        margin-top: 20rpx;
        border-radius: 30rpx;
        background: white;

        .title {
            line-height: 80rpx;
            display: flex;
            justify-content: space-between;
            padding: 0rpx 20rpx;
            border-top-left-radius: 16rpx;
            border-top-right-radius: 16rpx;
            background-color: rgba(98, 177, 88, 1);
            color: white;
        }

        .content {
            padding: 10rpx;

            .row-style {
                display: flex;
                justify-content: center;
                line-height: 80rpx;

                .category {
                    width: 15%;
                    // background: blue;
                }

                .name {
                    width: 50%;
                }

                .quantity {
                    width: 15%;
                }

                .amount {
                    width: 20%;
                }
            }


        }
    }
}</style>